<template lang="pug">
.foot-menu.clearfix.animated.bounceInUp(
  v-if="getMenuStatus",
  ref="footWrap",
  :class="{'active': getMenuStyleObj}",
  @touchmove="handleDragPrevent")
  //- Scene
  van-tabbar(v-model="active", :style="getBgColorStyle")
    van-tabbar-item(v-for="(item, index) in getBottomMenu", :key="index", @click="handleBtMenu(item)")
      span.omit(:style="getColorStyle") {{item.title}}
      template(slot="icon" slot-scope="props")
        i.iconfont(:class="item.icon", :style="getColorStyle")

    van-tabbar-item(@click="showScene")
      span(:style="getColorStyle") 场景
      template(slot="icon")
        i.iconfont.icon-scene_close(:style="getColorStyle")

    //- van-tabbar-item(@click="handlePerspective")
    //-   span(:style="getColorStyle") 视角
    //-   template(slot="icon")
    //-     i.iconfont.icon-view(:style="getColorStyle")

    van-tabbar-item(@click="handleSettings")
      span(:style="getColorStyle") 操作
      template(slot="icon")
        i.iconfont.icon-settings(:style="getColorStyle")

    van-action-sheet(v-model="sheets", :actions="actions", @cancel="sheetCancel", cancel-text="取消")

</template>

<script>
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'
// import Scene from 'Comps/Scene/app/scene-jd'

import {
  filterMenu,
  handleCustomMenu,
  handleSystemMenu
} from '@/utils/menu'

export default {
  name: 'menuBar',
  mixins: [themeMixin, menuMixin],
  data () {
    return {
      active: 0
    }
  },
  mounted() {
    setTimeout(async () => {
      const menu  =  await filterMenu(this.$CONFIG.defMenu)
      this.menuDataList = menu
    }, 1000)
  },
  methods: {
    // 自定义底部菜单
    handleBtMenu(item) {
      handleCustomMenu(item)
      this.sheets = false
    },
    handleSettings() {
      this.formatActions(this.menuDataList, this.handleSytemMenuItem)

      this.handleSheet()
    },
    // 系统菜单
    handleSytemMenuItem(item) {
      this.sheetCancel()
      handleSystemMenu(item)
    }
  }
}
</script>

<style lang="stylus">
.van-tabbar
  background-color: #1c1b21 !important;
  .van-tabbar-item
    color: #f1f1f1
  .van-tabbar-item--active
    color: #38f

.theme-app-c
  .foot-menu
    &.active
      .van-tabbar--fixed
        bottom: 36px
</style>
